<template>
  <div>
    <div class="top">
      <div>
        订单状态：
        <el-select v-model="orderStatus" @change="ccc">
        <el-option value="" label="全部"></el-option>
        <el-option value="0" label="待制作"></el-option>
        <el-option value="1" label="已制作"></el-option>
        <el-option value="2" label="已出品"></el-option>
      </el-select>
      </div>
      <div>
        <el-button type="text" @click="logOut">退出登录</el-button>
      </div>
    </div>
    <div class="body">
      <div class="left">
        <el-table
          :data="tableDate"
          border
          style="width: 100%"
          :header-cell-style="{
            background: '#00aa84',
            color: '#fff',
            textAlign: 'center',
          }"
          height="700"
          id="tableA"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="roomNum" label="房间号" />
          <el-table-column prop="lockPlateNum" label="手牌号" width="80" />
          <el-table-column prop="itemName" label="商品名称" />
          <el-table-column prop="number" label="数量" />
          <el-table-column prop="amount" label="金额" />
          <el-table-column label="已等待">
            <template slot-scope="scope">
              <div v-if="scope.row.wait">
                {{ `${scope.row.wait}分钟` }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="orderUserNumber" label="下单人" />
          <el-table-column prop="orderTime" label="下单时间" width="200" />
          <el-table-column prop="receivingNumber" label="接单人" />
          <el-table-column prop="produceNumber" label="出品人" />
          <el-table-column prop="produceName" label="出品部" />
          <el-table-column prop="description" label="备注" />
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                type="primary"
                v-if="scope.row.orderStatus === '待制作'"
                plain
                @click="detel(scope.row.id)"
              >
                接单
              </el-button>
              <el-button
                type="primary"
                v-if="scope.row.orderStatus === '已制作'"
                plain
                @click="detels(scope.row.id)"
              >
                出品
              </el-button>
              <el-button type="primary" plain v-print="printObj" v-if="false">
                打印
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagesize">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <div class="voiceBroadcast">
        <div class="title">语音播报列表</div>
        <div style="padding-top: 20px">
          <div class="langText" v-for="(item, index) in items" :key="index">
            <span>{{ item.text }}</span>
            <!-- <el-button type="text" @click="speak(item.text)">播放</el-button> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import {
  businessProduceOrderList,
  businessReceivingOrders,
  businessProduceOrderProduce,
  businessProduceOrderWaterBarList,
} from "@/api/produceOrder.js";
import Voice from "@/utils/QS-baiduyy.js"; //语音合成

export default {
  data() {
    return {
      tableDate: [],
      items: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      printObj: {
        id: "table_B", // 这里是要打印元素的ID
        popTitle: "消费排序列表", // 打印的标题
        extraCss: "", // 打印可引入外部的一个 css 文件
        extraHead: "", // 打印头部文字
      },
      orderStatus: "",
      txt: "播报一条消息",
    };
  },
  created() {
    this.getDataList();
    console.log(window.localStorage.getItem("item1"));
    !!window.localStorage.getItem("item1") &&
      [...JSON.parse(window.localStorage.getItem("item1"))].forEach((item) =>
        this.items.push(item)
      );
  },
  mounted() {
    this.createdList();
  },
  methods: {
    async logOut() {
      this.$confirm("确定注销并退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/login";
          });
        })
        .catch(() => {});
    },
    // 订单状态的修改事件
    ccc(val) {
      this.orderStatus = val;
      this.getDataList();
    },
    detel(id) {
      businessReceivingOrders(id).then((res) => {
        if (res.code === 200) {
          this.getDataList();
          this.$message.success("接单成功");
        }
      });
    },
    detels(id) {
      businessProduceOrderProduce(id).then((res) => {
        if (res.code === 200) {
          this.getDataList();
          this.$message.success("出品成功");
        }
      });
    },
    getDataList() {
      businessProduceOrderWaterBarList({
        orderStatus: this.orderStatus,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderType: "0",
      }).then((res) => {
        this.tableDate = res.data;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getDataList();
    },
    createdList() {
      window.setTimeout(() => {
        this.$socket.send(
          JSON.stringify({
            msgId: Date.now(),
            type: 3,
            data: JSON.stringify("aaa"),

            authorization: getToken(),
          })
        );
      }, 200);
      this.$socket.onmessage = this.messageSocket;
    },
    messageSocket(val) {
      const obj = JSON.parse(val.data);
      console.log(obj,'messageSocket');
      if (obj.type == 11) {
        if (this.items.length > 15) {
          this.items.splice(0, this.items.length - 15);
        }
        this.items.push({ text: obj.data });
        window.localStorage.setItem("item1", JSON.stringify(this.items));
        this.speak(obj.data);
      }
      this.getDataList();
    },
    speak(value) {
      console.log(value);
      Voice({
        //语音合成
        voiceSet: {
          tex: value,
        },
        audioSet: {
          volume: 1,
          obeyMuteSwitch: false,
        },
        audioCallback: {
          onPlay: () => {
            console.log("音频开始播放了");
          },
        },
        lineUp: true, // 加入语音队列
        returnAudio: false, // 返回音频对象
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  margin: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.body {
  margin-top: 20px;
  display: flex;
  .left {
    width: 75%;
  }
  .voiceBroadcast {
    width: 22%;
    height: 725px;
    background-color: #000;
    color: #fff;
    margin-left: 2%;
    .title {
      font-size: 18px;
      height: 35px;
      background-color: #55668a;
      color: #fff;
      line-height: 35px;
      padding-left: 15px;
    }
    .langText {
      height: 35px;
      padding-left: 20px;
    }
  }
  .pagesize {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
